<template>
    <div>
        <span class="buttonCont" @click="showDialog">
            <slot></slot>
        </span>
        <!--没有这个在表格中被覆盖! append-to=".content"  | append-to-body  -->
        <component :is="mode == 'dialog' ? Dialog : myFormCont" :teleported="false" append-to-body draggable
            v-if="myOptions.modalVisible" :visible.sync="myOptions.modalVisible" :title="data.computedDialogTitle"
            width="800" align-center destroy-on-close>
            <div>
                <el-form size="default" ref="formRef" style="width:100%" :model="data.formData" status-icon
                    :rules="data.formRules" label-position="right" label-width="auto" class="demo-ruleForm f-p10 f-bsb">
                    <el-row>
                        <!-- :rules="[{ required: true, message: '该项必填!', trigger: ['blur', 'change'], }]" -->
                        <!-- item开始 -->
                        <el-col :span="8" class="f-p2">
                            <el-form-item label-width="" label="输入框" prop="aaa">
                                <el-input class="myInput" v-model="data.formData.aaa" :maxlength="60" clearable
                                    :disabled="data.isDetail" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- item结束 -->
                    </el-row>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click.stop="hideDialog">取消</el-button>
                    <el-button :loading="data.loading" type="primary" @click.stop="onSubmit">确认</el-button>
                </div>
            </template>
        </component>
    </div>
</template>
<script>
import Vue from "vue"

const myFormCont = {
    render(h) {
        return h('div', [
            this.$slots.header && this.$slots.header(),
            this.$slots.default && this.$slots.default(),
            this.$slots.footer && this.$slots.footer()
        ])
    }
}

const myOptions = {
    modalVisible: true,
    pickerFormat: 'YYYY-MM-DD',// 'YYYY-MM-DD HH:mm:ss';
    detailIdName: "jjjjjj",
    arrayObject: {
        "timeArray": ["start1", "end1"],
        numberArray: ['min1', 'max1']
    },// 数组转对象的参数
    stringArray: ["lll"],// 字符串转数组的参数
}

const { doDetailData, doSubmit } = {
    doDetailData: function (params) {
        const aaaaaa = "/aaaaa"
        return klcs.ajaxTest({
            url: aaaaaa, params: { [this.myOptions.detailIdName]: this.value[this.myOptions.detailIdName] }
        })
    },
    doSubmit: function (params, type) {
        const addUrl = "/bbbbbbb";
        const editUrl = "/aaaaaa";
        var url;
        if (type == "edit") {
            url = editUrl
        } else if (type == "add") {
            url = addUrl
        }
        return klcs.ajaxTest({ url: url, params: params })
    }
}

export default {
    components: {},
    props: {
        value: { type: Object, default: function () { return {} } },
        type: { type: String, default: "add", },//  add  |   edit  |  detail
        mode: { type: String, default: "dialog" },//  dialog  |  pingPu
    },
    data() {
        console.log(11111, Vue.options.components.ElDialog)
        return {
            Dialog: Vue.options.components.ElDialog,
            myOptions: myOptions,
            data: {
                formData: {
                    ssss: moment(new Date()).format(myOptions.pickerFormat), // 需要默认值的参数
                },
                formRules: {// 特殊校验项的处理.
                    hhhh: [// 必填,以及长度,一般用于校验字数.
                        { required: true, message: '必填!', trigger: 'blur' },
                    ]
                },
                
                loading: false,
                type: " ",
            }
        }
    },
    computed: {
        isDetail: (function() { return (this.data.type == "detail"); }),
        isAdd: (function() { return this.data.type == "add"; }),
        isEdit: (function() { return this.data.type == "edit"; }),
        computedDialogTitle: (function() {
            var title = "";
            if (this.data.type == "add") { title = "新增"; }
            else if (this.data.type == "edit") { title = "编辑"; }
            else if (this.data.type == "detail") { title = "详情"; }
            return title;
        }),
    },
    created() { },
    mounted() {
        if (klcs.isTest()) {
            // if (data.type == 'add'){ // 
            //console.warn("我是测试点,我修改了….弹窗状态.")
            // showDialog();
            //}
        }
    },
    methods: {
        hideDialog(e) { this.myOptions.modalVisible = false; },
        showDialog() {
            this.data.type = this.type;
            console.info("当前弹窗模式:", this.data.type)
            this.myOptions.modalVisible = true;
            if (this.data.isDetail || this.data.isEdit) { getDetail(); }
        },
        getDetail() {
            if (!this.myOptions.detailUrl) {
                var unPackageParams = klcs.unPackageParams(this.value, this.myOptions.stringArray, this.myOptions.arrayObject);
                this.data.formData = unPackageParams;
                console.warn("props模式详情数据为: ", unPackageParams);
                return
            }

            doDetailData(params)
                .then((response) => {
                    // response.data = {"a": "你好", "b": "你,我", "lll": ["1", "2", "3"],"start1": "2021-01-01","end1": "2021-01-02"}
                    var unPackageParams = klcs.unPackageParams(response.data, this.myOptions.stringArray, this.myOptions.arrayObject);
                    console.warn("接口模式详情数据为: ", unPackageParams);
                    this.data.formData = unPackageParams;
                })
        },
        async onSubmit() {
            var flag = await this.$refs.formRef.validate();
            if (!flag) { return; }

            // this.data.formData = { a: "你好", b: "你,我", "lll": "1,2,3", timeArray: ["2021-01-01", "2021-01-02"] };
            var params = klcs.packageParams(
                this.data.formData,
                this.myOptions.stringArray,
                this.myOptions.arrayObject
            );

            console.warn('提交输出的参数为: ', params);

            this.data.loading = true;

            doSubmit(params, this.data.type)// add, edit
                .then((response) => {

                    if (klcs.successDataFlag(response)) {
                        this.$message.success("成功！");
                        this.$emit("submitOk"); // 事件触发
                        this.hideDialog();
                    } else { }
                })
                .finally(() => {
                    this.data.loading = false;
                });
        },
        disabledDate(time) { return time.getTime() > Date.now() }
    },

    watch: {
        aaaa: {
            handler(val) {
                //监听value的变化
            },
            deep: true,
            immediate: true
        }
    },

}
</script>
<style lang="less" scoped></style>